<template>
    <div class="popup">
        <van-cell @click="popup = !popup" title="请选择规格数量" is-link />
        <van-popup v-model="popup" closeable position="bottom" :style="{ height: '30%' }">
            <div class="box1">
                <div class="img">
                    <img v-lazy="info.pic" alt="" />
                </div>
                <div class="xx">
                    <h4>价格:<span style="color:red">{{ info.price | RMB }}</span></h4>
                    <h4>库存:<span>{{ info.num }}</span></h4>
                </div>
            </div>
            <div class="box2">
                <span>数量:</span>
                <van-stepper v-model="number" disable-input @change="change" />
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    props: ['info'],
    data() {
        return {
            popup: false,
            number: 1,
        }
    },
    methods: {
        change() {
            this.$emit('send', this.number)
        }
    }
}
</script>

<style lang="less" scoped>
.popup {
    .box1 {
        width: 100%;
        height: 90px;
        display: flex;

        .img {
            flex: 1;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .xx {
            flex: 3;
            font-size: 16px;

            h4 {
                height: 45px;
                line-height: 45px;

                span {
                    font-weight: 700;
                }
            }
        }
    }

    .box2 {
        margin-top: 20px;
        padding-left: 20px;
        display: flex;
        align-items: center;

        span {
            font-size: 20px;
            color: #666;
            font-weight: 700;
            margin-right: 20px;
        }
    }
}
</style>